<template>
	<view class="page" :style="{paddingTop: `${topHeight}px`}">
		<!-- <view class="linear" :style="{top: `-${topHeight}px`}"></view> -->
		<!--头部-->
		<view class="header">
			<view class="h-l">
				<up-icon color="#000" name="arrow-left" size="22" @tap="goBack"></up-icon>
				<up-icon color="#000" name="close" size="22" @tap="cancel"></up-icon>
			</view>
			<view class="h-c">
				<text>{{title}}</text>
			</view>
			<view class="h-r">
				<!-- <up-icon v-if="value==0" color="#000" name="search" size="24" @tap="doSearch"></up-icon> -->
				<image v-if="value==0" src="../../static/icon/searchFunnel.svg" style="width: 1.2rem;height: 1.2rem;" @tap="doSearch"></image>
				<!-- <text v-if="value==1">添加模板</text> -->
				<!-- <text v-if="value==2">报表</text> -->
				<!-- <text v-if="value==3">帮助</text> -->
			</view>
		</view>
		<!--子组件-->
		<view class="content">
			<!--看日志-->
			<view v-if="value==0" style="flex: 1 1 auto;">
				<LookLog ref="lookLog" :userInfo="userInfo" :tabIndex="tabIndex" :searchForm="searchForm"></LookLog>
			</view>
			<!--写日志-->
			<view v-if="value==1" style="flex: 1 1 auto;">
				<WriteLog :userInfo="userInfo"></WriteLog>
			</view>
			<!--统计导出-->
			<view v-if="value==2" style="flex: 1 1 auto;">
				<TotalLog :userInfo="userInfo"></TotalLog>
			</view>
			<!--模板管理-->
			<view v-if="value==3" style="flex: 1 1 auto;">
				<LogTemplete :userInfo="userInfo"></LogTemplete>
			</view>
		</view>
		<!--底部导航-->
		<view>
			<WorklogTabbar :value="value" @custom-event="handleJump"></WorklogTabbar>
		</view>
	</view>
</template>

<script>
	import { useChatStore, useGroupStore, useSocketStore, useUserStore } from '@/pinia-store/user';
	import { mapStores } from 'pinia';
	import LookLog from '@/components/worklog/look.vue';
	import WriteLog from '@/components/worklog/write.vue';
	import TotalLog from '@/components/worklog/total.vue';
	import LogTemplete from '@/components/worklog/templete.vue';
	import WorklogTabbar from '@/components/worklog/tabbar.vue';
	var _this;
	export default {
		components: {
			LookLog,
			WriteLog,
			TotalLog,
			LogTemplete,
			WorklogTabbar,
		},
		data() {
			return {
				userInfo:{},
				topHeight: 0,
				title:'看日志',
				value:0,
				tabIndex:0,
				searchForm:{},
			}
		},
		computed: {
		  	...mapStores(useChatStore, useGroupStore, useUserStore, useSocketStore),
		},
		created(){
			let app = uni.getSystemInfoSync();
			this.topHeight = app.statusBarHeight;
		},
		onLoad(options) {
		  	_this = this;
			// 获取APP用户信息
			_this.userInfo = _this.userStore.user;
			
			//console.log("jumpTo====", options);
			if(options.jumpTo == '我发出的') {
				_this.tabIndex = 1;
			}else if(options.jumpTo == '写日志') {
				_this.value = 1;
			}else if(options.searchForm) {
				_this.searchForm = JSON.parse(options.searchForm);
			}
			
		},
		methods: {
			doSearch() {
				uni.navigateTo({
					url:'/components/worklog/search',
					success(res) {
						res.eventChannel.emit('logSearch', {
							selectTab: _this.$refs.lookLog.selectTab
						});
					}
				})
			},
			handleJump(params) {
				this.value = params.value;
				switch (this.value){
					case 0:
						this.title = '看日志';
						break;
					case 1:
						this.title = '写日志';
						break;
					case 2:
						this.title = '统计导出';
						break;
					case 3:
						this.title = '模板管理';
						break;
					default:
						break;
				}
			},
			goBack () {
				uni.navigateBack({ delta: 1 });
			},
			cancel() {
				if(this.value==0) {
					this.goBack();
				}else {
					this.value = 0;
					this.title = '看日志';
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 50rpx;
		overflow: hidden;
	}
	.linear {
		position: absolute;
		background: linear-gradient(to bottom, #418EEB, #fff);
		width: 100%;
		height: 600rpx;
	}
	.header {
		position: relative;
		z-index: 9999;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		.h-l {
			width: 30%;
			display: flex;
			flex-direction: row;
			gap: 20rpx;
		}
		.h-c {
			width: 40%;
			text-align: center;
		}
		.h-r {
			width: 30%;
			display: flex;
			justify-content: flex-end;
		}
	}
	.content {
		position: relative;
		background-color: #fff;
		display: flex;
		height: 85vh;
	}
</style>
